<template>
  <div class="i-index-demo">
    <i-index
      height="100%"
      bind:change="onChange"
    >
      <i-index-item
        v-for="(item,index) in citys"
        :key="index"
      >
        <div
          class="i-index-demo-item"
          v-for="(it,ins) in  list"
          :key="ins"
        >
          {{it.name}}
        </div>
      </i-index-item>
    </i-index>

  </div>
</template>

<script>
import {cities} from './city'
export default {
	data() {
		return {
			cities: [],
		}
	},
	methods: {
		onChange(event) {},
	},
	created() {},
	onReady() {
		let storeCity = new Array(26)
		let that = this
		const words = [
			'A',
			'B',
			'C',
			'D',
			'E',
			'F',
			'G',
			'H',
			'I',
			'J',
			'K',
			'L',
			'M',
			'N',
			'O',
			'P',
			'Q',
			'R',
			'S',
			'T',
			'U',
			'V',
			'W',
			'X',
			'Y',
			'Z',
		]
		words.forEach((item, index) => {
			storeCity[index] = {
				key: item,
				list: [],
			}
		})
		cities.forEach(item => {
			let firstName = item.initial.substring(0, 1)
            let index = words.indexOf(firstName)
            console.log('ca',item)
			storeCity[index].list.push({
				name: item.list,
				key: firstName,
			})
		})
		that.cities = storeCity

		that.cities = that.cities
	},
}
</script>

<style>
</style>


